<template>
  <div class="content">
    <nav-title title=""/>
    <div class="title">表单信息</div>
    <list-item label="证明类型" :is-select="false"  :is-icon="true" :select-data-arr="proveType" @change="proveTypeCallBack"/>
    <list-item label="开具份数" v-model="issueNumber" />
    <list-item label="证明用途" v-model="proveUse"/>
    <list-item label="证明抬头" v-model="proveIse"/>
    <list-item label="领取方式" @change="pickupMethodCallBack" :is-icon="true" :is-select="false" :select-data-arr="payment"/>
    <list-item label="邮寄地址" v-model="mailingAddress"/>
    <list-item label="备注" v-model="remark"/>
    <!--<div class="instructions-title">附件</div>-->
    <!--<div class="upload">-->
    <!--<uploader-->
      <!--:max="6"-->
      <!--:handle-click="true"-->
      <!--:show-header="false"-->
      <!--:readonly="true"-->
      <!--upload-url="xxxxx"-->
      <!--name="img"-->
      <!--size="small"-->
      <!--@preview="previewMethod"-->
      <!--@add-image="addImageMethod"-->
      <!--@remove-image="removeImageMethod"-->
    <!--&gt;上传图片-->
    <!--</uploader>-->
    <!--<span class="text" v-if="fileList.length === 0">点击此处上传证明材料</span>-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--<div class="instructions">-->
      <!--<p>证明开具说明：</p>-->
      <!--1、所有证明按实际情况开具，不得随意按个人意愿填写相关数据；<br>-->
      <!--2、该证明必须用于申请的用途，若用于其他用途，所产生的相应后果由申请人承担；<br>-->
      <!--3、手机端仅能开具默认证明，若有特殊证明需求，请至电脑端申请并上传附件。-->
    <!--</div>-->
    <div class="sub-btn-content">
      <!--<div class="sub-save" @click="save">保存</div>-->
      <div class="sub-btn" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
  import ListItem from './common/ListItem'
  import {getProveInfo, saveProveInfo, getProveDictionaries} from './../../api/prove'
  import {getProcessNumber} from "../../api/prove";
  import {json2Form} from "../../util/http";

  export default {
    name: 'prove',
    components: {
      ListItem
    },
    data() {
      return {
        fileList: [],
        proveType: [],
        proveTypeValue: '',
        issueNumber: '',
        proveUse: '',
        proveIse: '',
        pickupMethod: {},
        mailingAddress: '',
        remark: '',
        accessory: '',
        payment: [],
        paymentValue: [],
        cTransactionNbr: ''
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      async initData() {
        this.getProveDictionariesFun()
        const retVal = await getProveInfo()
        console.log('初始化数据', retVal)
        const res = await getProcessNumber()
        console.log('流程编号', res)
        if (res && res.retData && res.retData.cTransactionNbr) {
          this.cTransactionNbr = res.retData.cTransactionNbr
        } else {
          console.log('请求有误', res)
        }
      },
      //获取当前字典数据
      async getProveDictionariesFun() {
        // urls依此为
        // 证明类型
        // 领取方式
        const urls = ['C_CERT_TYPE', 'C_CERT_METHOD']
        const reqs = urls.map(value => getProveDictionaries({fileName: value}))
        try {
          const retVals = await Promise.all(reqs)
          if (retVals) {
            if (retVals.length === urls.length) {
              console.log('页面字典集合', retVals)
              const temp = ['proveType', 'payment']
              retVals.forEach((value, index) => {
                this[temp[index]].push(value.retData.map(val => val.xlatshortname))
              })
              console.log('整合之后的', this.proveType)
              console.log('整合之后的', this.payment)
            } else {
              console.log('字典数组长度有误', retVals.length, urls.length)
            }
          }
        } catch (e) {
          console.log('字典获取失败', e)
        }
      },
      previewMethod() {

      },
      addImageMethod() {

      },
      removeImageMethod() {

      },
      // filesAdded(file) {
      //   console.log(file)
      // },
      // fileSubmitted(file) {
      //   if (!this.fileList.find(value => value.name === file.name)) {
      //     this.fileList.push(file)
      //   }
      //   console.log(file)
      // },
      // fileRemoved(file) {
      //   this.fileList = this.fileList.filter(value => value.name !== file.name)
      //   console.log(file)
      // },
      proveTypeCallBack(mes) {
        console.log(mes)
        this.proveTypeValue = mes
      },
      pickupMethodCallBack(mes) {
        console.log(mes)
        this.paymentValue = mes
      },
      save() {

      },
      async submit() {
        const data = {
          cTransactionNbr: this.cTransactionNbr,//(流程编号，自己调用a接口获取)
          cCertType: this.proveTypeValue,//(证明类型，从字典列表中获取)
          cCertNum: this.issueNumber,//(证明份数)
          cCertPurpose: this.proveUse,//证明用途
          cCertTitle: this.proveIse,//证明抬头
          cCertMethod: this.paymentValue,//(领取方式，从字典列表中获取)
          address100: this.mailingAddress,//(邮寄地址，当领取方式为10:邮寄时才显示此字段且不能为空)
          comments: this.remark,//COMMENTS(备注)"
        }
        console.log('本次提交的data', data)
        const retVal = await saveProveInfo(json2Form(data))
        if (retVal && retVal.retCode === '0') {
          console.log('保存成功！', retVal)
        } else {
          console.log('错误', retVal.retMsg)
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .content {
    .title {
      font-size: 16px;
      height: 36px;
      background-color: #07BC4B;
      text-align: left;
      color: white;
      line-height: 36px;
      font-weight: 900;
      padding-left: 10px;
    }
    .instructions-title {
      text-align: left;
      margin-left: 20px;
      padding: 10px 0;
      font-size: 14px;
      font-weight: 500;
    }
    .instructions {
      color: #7e8c8d;
      padding: 20px;
      text-align: left;
      font-size: 13px;
      line-height: 20px;
      p {
        font-size: 14px;
        color: #333333;
      }
    }
    .upload {
      background-color: #eeeeee;
      display: flex;
      align-items: center;
      padding-top: 10px;
      padding-left: 10px;
      .text {
        color: #333333;
        margin-left: 20px;
        font-size: 13px;
      }
    }
    .sub-btn-content {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 30px;
      .sub-save {
        width: 100px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #07BC4B;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }
      .sub-btn {
        width: 200px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F1C631;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }
      .sub-detail {
        width: 50%;
        height: 32px;
        display: flex;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        background-color: #07BC4B;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }
    }
  }

</style>
